<template>
  <page-wrap back hide-tab title="我的题库" stay-still :bg-color="uNavColor">
    <view>
      <InterViewNavbg />
      <view class="search">
        <u-search
          placeholder="请输入题库标题"
          class="library-u-search"
          v-model="keyword"
          height="80"
          bg-color="#FFFFFF;"
          maxlength="20"
          :show-action="true"
          :clearabled="false"
          @search="handleSearch"
          @custom="handleSearch"
        ></u-search>
      </view>
    </view>

    <view class="careerView" v-if="associationCareer.ylPositionName">
      关联职业：{{ associationCareer.ylPositionName }}
    </view>

    <view>
      <scroll-view
        class="scrollView"
        scroll-y
        enable-flex
        @scrolltolower="loadMore"
        :refresher-triggered="triggered"
      >
        <InterviewBankCell
          v-for="(item, index) in list"
          :key="index"
          :itemObj="item"
          btnTitle="详情"
          @cellTap="clickCell"
          @subBtn="gotoDetail"
        />

        <u-loadmore
          v-if="list.length > 0 || !loaded"
          class="list-more"
          :status="moreLoading"
          :load-text="loadText"
        />
        <Empty
          v-if="loaded && list.length <= 0"
          :baseImg="emptyImg"
          text="暂无数据"
          :fontWeight="400"
        />
      </scroll-view>
      <u-button
        class="tool"
        shape="circle"
        type="warning"
        @click="showAlertAaction"
        >创建题库</u-button
      >

      <u-popup
        v-model="showAlert"
        mode="center"
        border-radius="14"
        @close="maskClick"
      >
        <view class="alertView">
          <view class="alertTitle">创建题库</view>
          <view class="alertInput">
            <u-input
              v-model="alertName"
              height="100"
              :type="text"
              placeholder="请输入题库名称"
              :maxlength="30"
            />
            <u-line color="#e4e7ed" />
            <u-input
              v-model="alertCareer.ylPositionName"
              height="100"
              :type="select"
              @click="clickCareer"
              placeholder="请选择题库关联职业"
              :maxlength="30"
            />
            <u-line color="#e4e7ed" />
          </view>
          <u-button
            class="alertBtn"
            shape="circle"
            type="warning"
            @click="creatObject"
            >确定</u-button
          >
        </view>
      </u-popup>
    </view>
  </page-wrap>
</template>

<script>
import Empty from "@/components/Empty.vue";
import InterviewBankCell from "./components/InterviewBankCell.vue";
import {
  getCompanyRepo,
  getCompanyRepoList,
  createCompanyRepo,
} from "@/api/modules/company";
import InterViewNavbg from "./components/InterViewNavbg.vue";
export default {
  components: {
    Empty,
    InterviewBankCell,
    InterViewNavbg,
  },
  data() {
    return {
      companyId: uni.getStorageSync("company-id"),
      //companyId: 1001,

      showAlert: false,
      alertName: "",
      alertCareer: {},
      associationCareer: {
        ylPositionName: "",
      },

      ylPositionId: "",
      keyword: "",
      list: [],
      companyId: uni.getStorageSync("company-id"),
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      searchIcon: this.$imgBaseSelf + "common/search.png",
      finished: false,
      loading: false,
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
    };
  },

  onLoad(options) {
    if (options && options.career) {
      const obj = JSON.parse(options.career);
      this.alertCareer = obj;
      this.associationCareer = obj;
      this.ylPositionId = this.alertCareer.ylPositionId;
    }
  },

  onShow() {
    const pages = getCurrentPages();
    const currPage = pages[pages.length - 1];
    let value = currPage.data.resultData;
    if (value) {
      this.alertCareer = value;
    }
    this.getData(false);
  },

  methods: {
    maskClick() {
      //this.alertName = '';
    },

    loadMore() {
      this.getData(true);
    },
    onRestore() {
      this.triggered = false;
      this._triggered = false;
    },
    onRefresh() {
      if (this._triggered) return;
      this._triggered = true;

      if (!this.triggered) {
        this.triggered = true;
      }
      this.getData(false);
    },

    handleSearch(value) {
      this.keyword = value;
      this.getData(false);
    },

    clickCell(item) {
      if (this.associationCareer.ylPositionName.length > 0) {
        if (!item.requestCount || item.requestCount == 0) {
          uni.showToast({
            title: "请选择至少有1个题的题库",
            icon: "none",
          });

          return;
        }

        const pages = getCurrentPages();
        const prevPage = pages[pages.length - 2];
        prevPage.setData({
          questions: {
            title: item.repoTitle,
            topicId: item.id,
          },
        });
        uni.navigateBack();
      } else {
        this.gotoDetail(item);
      }
    },

    gotoDetail(item) {
      let url =
        "/pagesSub/companyCenter/interviewAI/interviewQuestionBankDetail?repoId=" +
        item.id +
        "&title=" +
        item.repoTitle;
      uni.navigateTo({
        url: url,
      });
    },

    creatObject() {
      if (!this.alertName || this.alertName.length == 0) {
        this.$u.toast("请填写标题");
        return;
      }
      if (!this.alertName || this.alertName.length > 30) {
        this.$u.toast("标题字数超出上限(30个字符)");
        return;
      }
      if (
        !this.alertCareer ||
        !this.alertCareer.ylPositionName ||
        this.alertCareer.ylPositionName.length == 0
      ) {
        this.$u.toast("请选择关联职业");
        return;
      }
      this.showAlert = false;
      this.createRepo(this.alertName, this.alertCareer);
    },
    clickCareer() {
      uni.navigateTo({
        url: "/pagesSub/companyCenter/interviewAI/interviewSearch",
      });
    },

    showAlertAaction() {
      this.alertName = "";
      this.showAlert = true;
    },

    //////////////////////////////////////////////////////
    ///////////////////////- 接 口 -///////////////////////////////

    // 创建题库
    createRepo(title, career) {
      let param = {
        companyId: this.companyId,
        repoTitle: title,
        positionName: career.ylPositionName,
        ylPositionId: career.ylPositionId,
      };
      createCompanyRepo(param).then((res) => {
        console.log(
          "🚀 ~ file: interviewQuestionBank.vue:204 ~ createCompanyRepo ~ res:",
          res
        );
        if (res && res.code === 200) {
          this.alertName = "";

          this.getData(false);
        } else {
        }

        uni.showToast({
          title: res.status_desc,
          icon: "none",
        });
      });
    },

    // 获取所有题库
    getData(isMore) {
      if (this.associationCareer.ylPositionName.length > 0) {
        this.getAssociationData(isMore);
        return;
      }

      if (!this.companyId) return;
      if (this.moreLoading == "loading") return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        // 刷新数据
        this.pageParams.pageNo = 1;
      }
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        companyId: this.companyId,
        repoTitle: this.keyword,
        ylPositionId: this.ylPositionId,
      };
      this.moreLoading = "loading";
      getCompanyRepo(params)
        .then((res) => {
          console.log(
            "🚀 ~ file: interviewQuestionBank.vue:233 ~ getCompanyRepo ~ res:",
            res
          );
          this.moreLoading = "loadmore";
          this.loaded = true;

          if (res.code == 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          console.log(e);
          this.moreLoading = "nomore";
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },

    // 获取关联职业题库
    getAssociationData(isMore) {
      if (!this.companyId) return;
      if (this.moreLoading == "loading") return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        // 刷新数据
        this.pageParams.pageNo = 1;
      }
      const params = {
        companyId: this.companyId,

        repoTitle: this.keyword,
        ylPositionId: this.ylPositionId,
      };
      this.moreLoading = "loading";
      getCompanyRepoList(params)
        .then((res) => {
          console.log(
            "🚀 ~ file: interviewQuestionBank.vue:233 ~ getCompanyRepoList ~ res:",
            res
          );
          this.moreLoading = "loadmore";
          this.loaded = true;

          if (res.code == 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          console.log(e);
          this.moreLoading = "nomore";
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  margin: 32rpx 32rpx 10rpx;
}

.scrollView {
  box-sizing: border-box;
  height: calc(100vh - 450rpx);
}

.tool {
  height: 100rpx;
  position: absolute;
  bottom: 50rpx;
  left: 160rpx;
  right: 160rpx;
}

.alertView {
  width: 500rpx;
  height: 520rpx;
  align-items: center;
  display: flex;
  flex-direction: column;
  .alertTitle {
    margin: 50rpx 0 32rpx 0;
    font-size: 40rpx;
  }
  .alertInput {
    width: 90%;
  }
  .alertBtn {
    height: 100rpx;
    width: 250rpx;
    margin-top: 32rpx;
  }
}

.careerView {
  display: flex;
  background: white;
  border-radius: 32rpx;
  justify-content: space-between;
  flex-direction: row;
  padding: 32rpx;
  margin: 32rpx 32rpx 0rpx;
  color: #999;
}
</style>
